<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>首页|团购网</title>
		<!-- 移动端参数设置 -->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 重置样式 -->
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<!-- 公共样式 -->
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<!-- 页面样式 -->
		<link rel="stylesheet" type="text/css" href="css/buy.css"/>
		<!-- 引入swiper插件样式 -->
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
		<!-- 网页图标 -->
		<link rel="shortcut icon" href="./img/b.ico"/>
	    <!-- swiper脚本 -->    
		<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.js"></script>
        <!-- iconfont引用 -->
        <link rel="stylesheet" href="//at.alicdn.com/t/font_867113_nyty0dwvjw.css"/>
	</head>
	<body>
		
		<!-- 头部 s -->
		<header class="clearfix">
			<div class="logo fl">
				<a href="buy_index.html"><img src="img/logo1.png"/></a>
			</div>
			<div class="selectBar fr">
				<select name="">
					<option value="">广州市</option>
					<option value="">佛山市</option>
					<option value="">深圳市</option>
				</select>
			</div>
			<div class="searchBar">
				<input type="search" placeholder="请输入商品名称"/>
				<input type="image" src="img/fdj2_03.png"/>
			</div>
		</header>
		<!-- 头部 e -->
		
		<!-- 主体 s -->
		<section>
	        <!-- 图片轮播容器 -->
	        <div class="pic_swiper">
	       	 	<div class="swiper-wrapper">
	       	 		<div href="" class="swiper-slide"><a href="buy_detail4.html"><img src="img/lb_02.jpg"/></a></div>
	       	 		<div href="" class="swiper-slide"><a href="buy_detail4.html"><img src="img/lb_02.jpg"/></a></div>
	       	 		<div href="" class="swiper-slide"><a href="buy_detail4.html"><img src="img/lb_02.jpg"/></a></div>
	       	 	</div>
	        </div>
	       <!-- 优惠团购 -->
	       <div class="show_youhui">
	       	 	<div class="lab clearfix">
	       	 		<div class="lab_logo fl">
	       	 			<img src="img/hua.png"/>
	       	 		</div>
	       	 		<div class="lab_tip fl">
	       	 			优惠团购
	       	 		</div>
	       	 		<div class="lab_more fr">
	       	 			<a href="">
	       	 				<span>更多</span>
	       	 				<img src="img/jiantou.png" />
	       	 			</a>
	       	 		</div>
	       	 	</div>
	       	 	<div class="pic">
	       	 		<ul class="clearfix">
	       	 			<li class="fl"><a href=""><img src="img/首页_05.jpg" /></a></li>
	       	 			<li class="fl"><a href=""><img src="img/首页_07.jpg" /></a></li>
	       	 			<li class="fl"><a href=""><img src="img/首页_11.jpg" /></a></li>
	       	 			<li class="fl"><a href=""><img src="img/首页_13.jpg" /></a></li>
	       	 		</ul>
	       	 	</div>
	       </div>
	        <!-- 猜你喜欢 -->
	       <div class="show_like">
	       	    <!-- 上方标题 -->
	       	 	<div class="lab clearfix">
	       	 		<div class="lab_logo fl">
	       	 			<img src="img/xin.png"/>
	       	 		</div>
	       	 		<div class="lab_tip fl">
	       	 			猜你喜欢
	       	 		</div>
	       	 		<div class="lab_more fr">
	       	 			<a href="">
	       	 				<span>更多</span>
	       	 				<img src="img/jiantou.png" />
	       	 			</a>
	       	 		</div>
	       	 	</div>
	       	 	<!-- 下方图片文字描述 -->
	       	 	<div class="detail">
	       	 		<!-- 第一行区 -->
	       	 	    <div class="det_list1 clearfix">
	       	 	    	<!-- 左侧图片 -->
	       	 	    	<div class="leftL fl">
	       	 	    		<a href="buy_detail.html"><img src="img/首页_18.jpg"/></a>
	       	 	    	</div>
	       	 	    	<!-- 右侧文字描述 -->
	       	 	    	<div class="rightL fl">
	       	 	    		<!--顶部-->
	       	 	    		<div class="detTop clearfix">
	       	 	    			<span class="fl">万岁寿司(正佳店)</span>
	       	 	    			<a href="" class="fr">&lt;100m</a>
	       	 	    		</div>
	       	 	    		<!--中部-->
	       	 	    		<div class="detMid">
	       	 	    			<span>[100店通用]</span>
	       	 	    			<span>双人套餐</span>
	       	 	    		</div>
	       	 	    		<!--底部-->
	       	 	    		<div class="detBot clearfix">
	       	 	    			<span class="iconfont icon-renminbi fl">88.00</span>
	       	 	    			<span class="fr">已售1000</span>
	       	 	    		</div>
	       	 	        </div>
	       	 	    </div>
	       	 	    <!-- 第二行区 -->
	       	 	    <div class="det_list1 clearfix">
	       	 	    	<!-- 左侧图片 -->
	       	 	    	<div class="leftL fl">
	       	 	    		<a href="buy_detail2.html">
	       	 	    			<img src="img/首页_21.jpg"/>
	       	 	    		</a>
	       	 	    	</div>
	       	 	    	<!-- 右侧文字描述 -->
	       	 	    	<div class="rightL fl">
	       	 	    		<!--顶部-->
	       	 	    		<div class="detTop clearfix">
	       	 	    			<span class="fl">周黑鸭(正佳店)</span>
	       	 	    			<a href="" class="fr">&lt;100m</a>
	       	 	    		</div>
	       	 	    		<!--中部-->
	       	 	    		<div class="detMid">
	       	 	    			<span>[100店通用]</span>
	       	 	    			<span>双人套餐</span>
	       	 	    		</div>
	       	 	    		<!--底部-->
	       	 	    		<div class="detBot clearfix">
	       	 	    			<span class="iconfont icon-renminbi fl">88.00</span>
	       	 	    			<span class="fr">已售1000</span>
	       	 	    		</div>
	       	 	        </div>
	       	 	    </div>
	       	 	    <!-- 第三行区 -->
	       	 	    <div class="det_list1 clearfix">
	       	 	    	<!-- 左侧图片 -->
	       	 	        <div class="leftL fl">
	       	 	    		<a href="buy_detail.html"><img src="img/首页_18.jpg"/></a>
	       	 	    	</div>
	       	 	    	<!-- 右侧文字描述 -->
	       	 	    	<div class="rightL fl">
	       	 	    		<!--顶部-->
	       	 	    		<div class="detTop clearfix">
	       	 	    			<span class="fl">万岁寿司(正佳店)</span>
	       	 	    			<a href="" class="fr">&lt;100m</a>
	       	 	    		</div>
	       	 	    		<!--中部-->
	       	 	    		<div class="detMid">
	       	 	    			<span>[100店通用]</span>
	       	 	    			<span>双人套餐</span>
	       	 	    		</div>
	       	 	    		<!--底部-->
	       	 	    		<div class="detBot clearfix">
	       	 	    			<span class="iconfont icon-renminbi fl">88.00</span>
	       	 	    			<span class="fr">已售1000</span>
	       	 	    		</div>
	       	 	        </div>
	       	 	    </div>
	       	 	    <!-- 第四行区 -->
	       	 	     <div class="det_list1 clearfix">
	       	 	    	<!-- 左侧图片 -->
	       	 	    	<div class="leftL fl">
	       	 	    		<a href="buy_detail2.html">
	       	 	    			<img src="img/首页_21.jpg"/>
	       	 	    		</a>
	       	 	    	</div>
	       	 	    	<!-- 右侧文字描述 -->
	       	 	    	<div class="rightL fl">
	       	 	    		<!--顶部-->
	       	 	    		<div class="detTop clearfix">
	       	 	    			<span class="fl">周黑鸭(正佳店)</span>
	       	 	    			<a href="" class="fr">&lt;100m</a>
	       	 	    		</div>
	       	 	    		<!--中部-->
	       	 	    		<div class="detMid">
	       	 	    			<span>[100店通用]</span>
	       	 	    			<span>双人套餐</span>
	       	 	    		</div>
	       	 	    		<!--底部-->
	       	 	    		<div class="detBot clearfix">
	       	 	    			<span class="iconfont icon-renminbi fl">88.00</span>
	       	 	    			<span class="fr">已售1000</span>
	       	 	    		</div>
	       	 	        </div>
	       	 	    </div>
	       	 	    <!-- 第五行区 -->
	       	 	    <div class="det_list1 clearfix">
	       	 	    	<!-- 左侧图片 -->
	       	 	    	<div class="leftL fl">
	       	 	    		<a href="buy_detail.html"><img src="img/首页_18.jpg"/></a>
	       	 	    	</div>
	       	 	    	<!-- 右侧文字描述 -->
	       	 	    	<div class="rightL fl">
	       	 	    		<!--顶部-->
	       	 	    		<div class="detTop clearfix">
	       	 	    			<span class="fl">万岁寿司(正佳店)</span>
	       	 	    			<a href="" class="fr">&lt;100m</a>
	       	 	    		</div>
	       	 	    		<!--中部-->
	       	 	    		<div class="detMid">
	       	 	    			<span>[100店通用]</span>
	       	 	    			<span>双人套餐</span>
	       	 	    		</div>
	       	 	    		<!--底部-->
	       	 	    		<div class="detBot clearfix">
	       	 	    			<span class="iconfont icon-renminbi fl">88.00</span>
	       	 	    			<span class="fr">已售1000</span>
	       	 	    		</div>
	       	 	        </div>
	       	 	    </div>
	       	 	    <!-- 第六行区 -->
	                <div class="det_list1 clearfix">
	       	 	    	<!-- 左侧图片 -->
	       	 	    	<div class="leftL fl">
	       	 	    		<a href="buy_detail2.html">
	       	 	    			<img src="img/首页_21.jpg"/>
	       	 	    		</a>
	       	 	    	</div>
	       	 	    	<!-- 右侧文字描述 -->
	       	 	    	<div class="rightL fl">
	       	 	    		<!--顶部-->
	       	 	    		<div class="detTop clearfix">
	       	 	    			<span class="fl">周黑鸭(正佳店)</span>
	       	 	    			<a href="" class="fr">&lt;100m</a>
	       	 	    		</div>
	       	 	    		<!--中部-->
	       	 	    		<div class="detMid">
	       	 	    			<span>[100店通用]</span>
	       	 	    			<span>双人套餐</span>
	       	 	    		</div>
	       	 	    		<!--底部-->
	       	 	    		<div class="detBot clearfix">
	       	 	    			<span class="iconfont icon-renminbi fl">88.00</span>
	       	 	    			<span class="fr">已售1000</span>
	       	 	    		</div>
	       	 	        </div>
	       	 	    </div>
	       	 	    <!-- 第七行区 -->
	       	 	    <div class="det_list1 clearfix">
	       	 	    	<!-- 左侧图片 -->
	       	 	    	<div class="leftL fl">
	       	 	    		<a href="buy_detail.html"><img src="img/首页_18.jpg"/></a>
	       	 	    	</div>
	       	 	    	<!-- 右侧文字描述 -->
	       	 	    	<div class="rightL fl">
	       	 	    		<!--顶部-->
	       	 	    		<div class="detTop clearfix">
	       	 	    			<span class="fl">万岁寿司(正佳店)</span>
	       	 	    			<a href="" class="fr">&lt;100m</a>
	       	 	    		</div>
	       	 	    		<!--中部-->
	       	 	    		<div class="detMid">
	       	 	    			<span>[100店通用]</span>
	       	 	    			<span>双人套餐</span>
	       	 	    		</div>
	       	 	    		<!--底部-->
	       	 	    		<div class="detBot clearfix">
	       	 	    			<span class="iconfont icon-renminbi fl">88.00</span>
	       	 	    			<span class="fr">已售1000</span>
	       	 	    		</div>
	       	 	        </div>
	       	 	    </div>
	       	 	    <!-- 第八行区 -->
	       	 	     <div class="det_list1 clearfix">
	       	 	    	<!-- 左侧图片 -->
	       	 	    	<div class="leftL fl">
	       	 	    		<a href="buy_detail2.html">
	       	 	    			<img src="img/首页_21.jpg"/>
	       	 	    		</a>
	       	 	    	</div>
	       	 	    	<!-- 右侧文字描述 -->
	       	 	    	<div class="rightL fl">
	       	 	    		<!--顶部-->
	       	 	    		<div class="detTop clearfix">
	       	 	    			<span class="fl">周黑鸭(正佳店)</span>
	       	 	    			<a href="" class="fr">&lt;100m</a>
	       	 	    		</div>
	       	 	    		<!--中部-->
	       	 	    		<div class="detMid">
	       	 	    			<span>[100店通用]</span>
	       	 	    			<span>双人套餐</span>
	       	 	    		</div>
	       	 	    		<!--底部-->
	       	 	    		<div class="detBot clearfix">
	       	 	    			<span class="iconfont icon-renminbi fl">88.00</span>
	       	 	    			<span class="fr">已售1000</span>
	       	 	    		</div>
	       	 	        </div>
	       	 	    </div>
	            </div>
		</section>
		<!-- 主体 e -->
		
		<!-- 底部 s -->
		<footer>
			<div class="choose_page clearfix">
				<div class="shouye fl">
					<a href="buy_index.html">
						<img src="img/zhuye.png"/>
					</a>
					<div>首页</div>
				</div>
				<div class="fenlei fl">
					<a href="buy_fenlei.html">
						<img src="img/fenl.png"/>
					</a>
					<div>分类</div>
				</div>
				<div class="faxian fl">
					<a href="buy_faxian.html">
						<img src="img/fax.png"/>
					</a>
					<div>发现</div>
				</div>
				<div class="my fl">
					<a href="buy_my.html">
						<img src="img/wod.png"/>
					</a>
					<div>我的</div>
				</div>
			</div>
		</footer>
		<!-- 底部 e -->
		
		<!--js代码 启动swiper对象-->   
		<script  type="text/javascript" charset="utf-8">
					    document.body.style.height = window.innerHeight + "px";
		    
		    /*动态改变根元素字体大小*/
		    function recalc() {
		    	// 获取客户端的宽度
		        var clientWidth = document.documentElement.clientWidth;
		        if(!clientWidth) return;
		        // 字体大小   = 1个rem单位表示多少个像素（设备的宽度   /设计宽度）
		        document.documentElement.style.fontSize = 40 * (clientWidth / 750) + 'px';
		    }
		
		    function initRecalc() {
		        recalc();
		        // if(浏览器支持横竖屏切换的事件){横竖屏事件}else{ resize事件 }
		        var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
		        if(!document.addEventListener) return;
		        window.addEventListener(resizeEvt, recalc, false);
		        document.addEventListener('DOMContentLoaded', recalc, false);
		    }
		    initRecalc();   
		    
			var mySwiper = new Swiper(".pic_swiper", {
				direction: "horizontal", // 轮播方式的方向：横向/垂直
				loop: true, // 是否需要循环
				autoplay:true              // 自动轮播
			})
		</script>
	</body>
</html>
